<template>
  <div class="container">
    <div>
      <!--router-link用作导航切换组件-->
      <router-link to='/'>Home</router-link>
      <router-link to='about'>About</router-link>
    </div>
    <!--地址栏路径对应的组件，都将显示在router-view组件下-->
    <router-view/>
  </div>
</template>
<script>
//引入路由实例，该实例只会在项目初始化的时候被创建一次
import router from './router'
export default{
  name: 'App',
  setup(){
    //实例的beforeEach方法，用于切换路由前的监听
    router.beforeEach((to, from) => {
      //回调函数接收两个参数，第1个参数是路由要去哪里，
      //第2个参数是路由从何而来
      console.log('去何处',to)
      console.log('从何来',from)
      //当路由要前往name属性为about时，打印如下内容
      if(to.name == 'about'){
        console.log('去About之前的打印')
      }
    })
  }
}
</script>